{{define "layouts/header.html"}}
<header class="header">
  <div class="container header-flex">
    <!-- 移动端菜单按钮 -->
    <button id="mobile-menu-toggle" class="mobile-menu-toggle">
      <span class="hamburger-line"></span>
      <span class="hamburger-line"></span>
      <span class="hamburger-line"></span>
    </button>

    <a class="logo" href="/">BroQiang 博客</a>

    <!-- 桌面端导航 -->
    <nav class="nav desktop-nav">
      <a href="/">首页</a>
      {{range $category, $count := .Categories}}
      <a href="/category/{{$category}}">{{$category}}</a>
      {{end}}
      <a href="/about">About</a>
    </nav>

    <div class="header-actions">
      <button id="search-toggle" class="search-toggle">
        <img src="/static/images/search.svg" alt="搜索" />
      </button>
    </div>
  </div>

  <!-- 移动端导航菜单 -->
  <nav id="mobile-nav" class="mobile-nav">
    <a href="/">首页</a>
    {{range $category, $count := .Categories}}
    <a href="/category/{{$category}}">{{$category}}</a>
    {{end}}
    <a href="/about">About</a>
  </nav>
</header>

<!-- 搜索弹窗 -->
<div id="search-modal" class="search-modal">
  <div class="search-modal-content">
    <div class="search-modal-header">
      <input
        type="text"
        id="search-input"
        class="search-input"
        placeholder="搜索文章..."
        autocomplete="off"
      />
      <button id="search-close" class="search-close">&times;</button>
    </div>
    <div id="search-results" class="search-results"></div>
  </div>
</div>
{{end}}
